<template>
  <div>
    <!-- 年/月 -->
    <el-row type="flex" justify="end">
      <el-select v-model="currentyear" size="small" style="width:120px" @change="dataChange">
        <el-option v-for="item in yearList " :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="currentMonth" size="small" style="width:120px; margin-left:20px" @change="dataChange">
        <!-- 循环 -->
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </el-row>

    <!-- 日历 -->
    <el-calendar v-model="currentDate">
      <template v-slot:dateCell="{date,data}">
        <div class="date-content">
          <span class="text"> {{ data.day | getDay }}</span>
          <span v-if="isWeek(date)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  filters: {
    getDay(value) {
      const day = value.split('-')[2]
      return day.startsWith('0') ? day.substr(1) : day
    }
  },
  props: {
    startDate: {
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      yearList: [],
      currentyear: null,
      currentMonth: null,
      currentDate: null
    }
  },
  created() {
    this.currentyear = new Date().getFullYear()
    this.currentMonth = new Date().getMonth() + 1
    // 快速生成数组方法
    this.yearList = Array.from(Array(11), (v, i) => this.currentyear + i - 5)
    this.currentDate = new Date()
  },
  methods: {
    dataChange() {
      this.currentDate = new Date(`${this.currentyear}-${this.currentMonth}-1`)
    },
    isWeek(date) {
      return date.getDay() === 6 || date.getDay() === 0
    }
  }

}
</script>

